<template>
  <view>
    <!-- 就诊人信息 -->
    <uni-list>
      <uni-list-item title="当前就诊人" note="点击查看就诊人信息" :rightText="patientInfo.name ? patientInfo.name : ''" link clickable
        @click="toUserInfo" />
    </uni-list>
    <view style="height: 20px;"></view>
    <!-- 用户可修改信息 -->
    <uni-list :border="true">
      <uni-list-chat title="头像" note="点击上传用户头像" :avatar-circle="true" v-if="userInfo.avatar" :avatar="userInfo.avatar">
        <view class="chat-custom-right">
          <!-- 按钮 -->
          <view class="action">
            <button class="cu-btn round bg-cyan shadow" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
              <text class="cuIcon-upload"></text> 上传</button>
          </view>
        </view>
      </uni-list-chat>
      <uni-list-item title="注册手机" :rightText="userInfo.phone" v-if="userInfo.phone" clickable
        @click="editPassword"></uni-list-item>
      <uni-list-item title="用户昵称" rightText="修改" to="/subpkg/edit_nickname/edit_nickname" link="navigateTo" clickable
        @click="editPassword"></uni-list-item>
      <uni-list-item title="账号密码" rightText="修改" link="navigateTo" clickable @click="editPassword"></uni-list-item>
    </uni-list>

    <!-- 退出登陆 -->
    <view class="login-out" @click="dialogToggle">
      <view class="out-text">退出登陆</view>
    </view>

    <view>
      <!-- 提示窗示例 -->
      <uni-popup ref="alertDialog" type="dialog">
        <uni-popup-dialog type="warn" cancelText="取消" confirmText="确认" title="提示" content="确认退出登陆吗？"
          @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
      </uni-popup>
    </view>
  </view>
</template>

<script>
  import {
    mapMutations,
    mapState
  } from 'vuex'
  export default {
    computed: {
      // 2. 从 m_user 模块中导入需要的 token 字符串
      ...mapState('m_user', ['userInfo', 'token', 'patientInfo']),
    },
    onLoad() {
      if (this.$staticUrl) {
        this.defaultAvatar = this.$staticUrl + 'my-icon-def-avatar.png';
      } else {
        console.error('staticUrl 未定义');
      }
      // 初始化头像
      this.userInfo.avatar = this.userInfo.avatar ? this.userInfo.avatar : this.defaultAvatar;
    },
    data() {
      return {
        user: {},
        defaultAvatar: '',
      }
    },
    methods: {
      ...mapMutations('m_user', ['updateUserAvatar', 'loginout']),
      // 开启对话框
      dialogToggle(type) {
        this.$refs.alertDialog.open();
      },
      // 确认对话框
      dialogConfirm() {
        this.loginout();
        // 跳转到首页
        uni.reLaunch({
          url: '/pages/login/login'
        });
      },
      // 关闭对话框
      dialogClose() {
        
      },
      // 查看就诊人信息
      toUserInfo() {
        uni.navigateTo({
          url: '/subpkg/patient_info/patient_info'
        })
      },
      // 修改密码
      editPassword() {

      },
      // 修改头像
      onChooseAvatar(e) {
        const uploadUrl = this.$baseUrl + "/wx/oss/upload";
        const token = 'Bearer ' + this.token;
        const that = this;
        const headers = {
          Authorization: token
        }
        const {
          avatarUrl
        } = e.detail
        wx.uploadFile({
          filePath: avatarUrl,
          name: 'file',
          header: headers,
          url: uploadUrl, //服务器端接收图片的路径
          success: function(res1) {
            console.log(res1); //发送成功回调
            const resData = JSON.parse(res1.data);
            if (resData.code !== 200) return uni.$showMsg('上传失败')
            const avatarPath = resData.data.ossId;
            // 发送请求修改用户头像
            uni.$http.post('/user/update/avatar', avatarPath).then(res2 => {
              console.log(res2);
              if (res2.data.code !== 200) return uni.$showMsg('上传失败')
              // 上传成功
              uni.showToast({
                title: '上传成功',
              });
              console.log(resData.data);
              that.userInfo.avatar = resData.data.url;
              that.updateUserAvatar(resData.data.url);
            });
          },
          fail: function(res1) {
            console.log(res1); //发送失败回调，可以在这里了解失败原因
            uni.$showMsg('上传失败');
          }
        });
      }
    }
  }
</script>

<style lang="scss">
  .avatar-content {
    display: flex;
    align-items: center;

    .text-content {
      margin-left: 5px;
    }
  }

  .btn-container {
    margin-top: 20px;

    .avatar-btn {
      height: 30px;
      width: 100px;

      .btn-text {
        font-size: 12px;
      }
    }
  }


  .main-container {
    margin-top: 20px;
  }

  .avatar-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .login-out {
    margin-top: 30px;
    height: 40px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;

    .out-text {
      color: red;
    }
  }
</style>